<template>
  <section class="card">
    <h2>⚙️ 设置</h2>
    <label class="muted">后端地址</label>
    <input v-model="baseUrl" placeholder="http://localhost:8787" />
    <div class="row">
      <button class="btn" @click="save">保存</button>
      <span class="muted">{{ hint }}</span>
    </div>
  </section>
</template>
<script setup>
import { ref } from 'vue';
import { useStore } from '../stores/useStore';
const store = useStore();
const baseUrl = ref(store.baseUrl);
const hint = ref('');
function save(){ store.setBase(baseUrl.value); hint.value='已保存'; }
</script>
<style>
.card{border:1px solid #e6e6eb;border-radius:20px;padding:14px;background:#fff;margin-bottom:12px;box-shadow:0 12px 30px rgba(45,17,83,.06)}
.row{display:flex;gap:10px;align-items:center;margin-top:8px}
.btn{background:#7c3aed;color:#fff;border:0;padding:8px 12px;border-radius:10px;cursor:pointer}
.muted{color:#6e6e73;font-size:12px}
input{width:100%;padding:10px;border:1px solid #e6e6eb;border-radius:12px}
</style>
